﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div id="tiles" class="blue metro-app homepage">
    <!-- Sliding Tile that shows 100% of the back tile every 3 seconds -->
    <div class="live-tile" data-stops="100%" data-speed="750" data-delay="3000">
        <span class="tile-title">Asian Foods</span>
        <div><img src="../../Content/img/dish/img1.jpg" alt="1" /></div>
        <div><img src="../../Content/img/dish/img2.jpg" alt="2" /></div>
    </div>
    <!-- Red Flip Tile that flips every 4 seconds -->
    <div class="red live-tile" data-mode="flip" data-delay="4000">
        <div>
            <img src="../../Content/img/dish/img3.jpg" alt="3" />
            <a class="tile-title">Vegetarian</a>
        </div>
        <div>
            <img src="../../Content/img/dish/img4.jpg" alt="4" />
            <a class="tile-title">Seafood</a>
            </div>
    </div>
    <!-- Mango Flip List that triggers every 3 seconds -->
    <div class="mango list-tile">
        <span class="tile-title">Dessert</span>
        <ul class="flip-list fourTiles" data-mode="flip-list" data-delay="3000">
            <li>
                <div><img src="../../Content/img/dish/img5.jpg"  alt="1" /></div>
                <div><img src="../../Content/img/dish/img6.jpg" alt="1" /></div>
            </li>
            <li>
                <div><img src="../../Content/img/dish/img7.jpg"  alt="2" /></div>
                <div><img src="../../Content/img/dish/img8.jpg" alt="2" /></div>
            </li>
            <li>
                <div><img src="../../Content/img/dish/img9.jpg"  alt="3" /></div>
                <div><img src="../../Content/img/dish/img10.jpg" alt="3" /></div>
            </li>
            <li data-direction="horizontal">
                <div><img src="../../Content/img/dish/img11.jpg"  alt="4" /></div>
                <div><img src="../../Content/img/dish/img12.jpg" alt="4" /></div>
            </li>
        </ul>
    </div>
    <!-- Green Static Tile -->
    <div class="live-tile exclude" style="background-color:#212121">
         <a href="javascript:void(0)" class="food"><img  src="../Content/img/1pixel.gif" alt="All Foods" /></a>
        <span class="tile-title">All Foods</span>
    </div>
</div>
<!-- Activate live tiles -->
<script type="text/javascript">
    // apply regular slide universally unless .exclude class is applied 
    // NOTE: The default options for each liveTile are being pulled from the 'data-' attributes
    $(".live-tile, .flip-list").not(".exclude").liveTile();
</script>
